<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="80px">
				<el-form-item label="合作状态">
					<el-select class="w-[308px]" v-model="queryParams.status" placeholder="请选择" clearable filterable>
						<el-option label="待确认" :value="1" />
						<el-option label="进行中" :value="2" />
						<el-option label="已完成" :value="3" />
						<el-option label="已取消" :value="4" />
					</el-select>
				</el-form-item>
				<el-form-item label="渠道名称">
					<el-input class="w-[280px]" v-model="queryParams.ce_real_name" clearable />
				</el-form-item>
				<el-form-item label="用户名称">
					<el-input class="w-[280px]" v-model="queryParams.u_real_name" clearable />
				</el-form-item>
				<el-form-item label="合作编号">
					<el-input class="w-[280px]" v-model="queryParams.sn" clearable />
				</el-form-item>
				<el-form-item label="创建时间" class="picker">
					<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
				</el-form-item>
				<el-form-item label="所属城市">
					<el-select-v2
                        v-model="queryParams.area_id"
                        filterable
                        clearable
                        :options="optionCity"
                        placeholder="请选择"
                        class="w-[280px]"
                        :height="280"
                    />
				</el-form-item>
				<el-form-item label="合作类型">
					<el-select class="w-[280px]" v-model="queryParams.mode" placeholder="请选择" clearable filterable>
						<el-option label="全部" value />
						<el-option label="渠道合作" :value="1" />
						<el-option label="固定介绍费" :value="2" />
						<el-option label="双方分成" :value="3" />
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="业务类型">
					<el-select class="w-[280px]" multiple :multiple-limit="3" v-model="queryParams.product_cate_ids">
						<el-option  v-for="(item) in optionsData.product_cate_list " :label="item.name" :value="item.id.toString()" :key="item.id.toString()"/>
					</el-select>
				</el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none" shadow="never">
			<el-button type="primary" class="mb-4" @click="addCooperate">创建合作</el-button>
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号(ID)" prop="id" min-width="90" />
				<el-table-column label="所属城市" prop="area_id" min-width="120">
					<template #default="{ row }">
						<span v-if="row.area_id" v-city="row.area_id"></span>
					</template>
				</el-table-column>
				<el-table-column label="合作类型" min-width="120" prop="mode" >
					<template #default="{ row }">
						<span v-if="row.mode == 1">渠道合作</span>
						<span v-if="row.mode == 2">固定介绍费</span>
						<span v-if="row.mode == 3">双方分成</span>
						<span v-if="row.mode == 5">双方分成</span>
					</template>
				</el-table-column>
				<el-table-column label="合作编号" min-width="200" prop="sn" />
				<el-table-column label="创建时间" prop="create_time" min-width="180" />
				<el-table-column label="确认合作时间" prop="create_time" min-width="180" />
				<el-table-column label="合作状态" min-width="90">
					<template #default="{ row }"> {{row.status==1?'待确认':row.status==2?'进行中':row.status==3?'已完成':row.status==4?'已取消':row.status==5?'已撤销':''}} </template>
				</el-table-column>
				<el-table-column label="业务类型" min-width="160" prop="pc_name" />
				<el-table-column label="产品名称" prop="p_name" min-width="200" >
					<template #default="{ row }">
						<span>{{ row.p_name? row.p_name: '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="所需额度(万)" prop="quota" min-width="120">
					<template #default="{ row }">{{(row.quota/10000).toFixed(4)}}</template>
				</el-table-column>
				<!-- <el-table-column label="利率" prop="rate" min-width="100">
					<template #default="{ row }">{{row.rate}}%</template>
				</el-table-column>
				<el-table-column label="年限" prop="credit_year" min-width="100">
					<template #default="{ row }">{{row.credit_year}}年</template>
				</el-table-column>
				<el-table-column label="服务费(元)" prop="service_fee" min-width="100">
					<template #default="{ row }">{{row.service_fee}}</template>
				</el-table-column> -->
				<el-table-column label="用款时间" prop="use_money_time" min-width="120" />
				<el-table-column label="用户名称" prop="u_real_name" min-width="100" />
				<el-table-column label="用户头像" prop="u_avatar" min-width="100">
					<template #default="{ row }">
						<el-avatar :src="row.u_avatar" :size="58" />
					</template>
				</el-table-column>
				<el-table-column label="渠道名称" prop="ce_real_name" min-width="160" />
				<el-table-column label="渠道头像" prop="ce_avator" min-width="100">
					<template #default="{ row }">
						<el-avatar :src="row.ce_avator" :size="58" />
					</template>
				</el-table-column>
				<el-table-column label="渠道公司" prop="ce_company_name" min-width="200"/>
				<!-- <el-table-column label="产品id" prop="p_sn" min-width="200"/> -->
				<el-table-column label="纠纷" prop="is_dispute" min-width="100">
					<template #default="{ row }">
						<span v-if="row.is_dispute == 1">是</span>
						<span v-if="row.is_dispute == 0">否</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="280" fixed="right">
					<template #default="{ row }">
						<router-link v-perms="['cooperation.cooperation/detail']" :to="{ path: getRoutePath('cooperation.cooperation/detail'), query: { id: row.id } }">
							<el-button type="primary" link>详情</el-button>
						</router-link>
						<el-button v-if="row.status != 5" v-perms="['cooperation.cooperation/isDispute']" type="primary" link @click="handleChange(row.id, row.is_dispute)">变更纠纷</el-button>
						<el-button v-perms="['cooperation.cooperation/closeCooperation']" type="danger" link @click="handleClose(row.id)">取消合作</el-button>
						<el-button v-perms="['cooperation.cooperation/closeCooperation']" v-if="row.is_has_confirm_time" type="warning" link @click="showGood(row)">合作喜报</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
			<el-dialog
				v-model="dialogVisible"
				title="变更纠纷"
    			width="360"
			>
			<div class="dispute-flex">
				<span>纠纷</span>
				<el-radio-group v-model="radio">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</div>
			
			<div class="dispute-flex">
				<el-button @click="()=>{dialogVisible = false}">取消</el-button>
				<el-button type="primary" @click="onRight">确认</el-button>
			</div>
			</el-dialog>
		</el-card>
		<!-- 合作喜报 -->
		 <el-dialog
			v-model="showDialog"
			title="合作喜报"
			width="880"
		>
			<div class="flex justify-between mb-[20px]">
				<div class="w-[350px]">
					<el-form ref="formGood" class="mb-[-16px]" :model="goodParams" :inline="true" label-width="80px">
						<el-form-item label="渠道头像" prop="avator">
							<div class="w-80">
								<div>
									<material-picker v-model="goodParams.ce_avator" size="60px" :limit="1"/>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="渠道名称">
							<el-input class="w-[280px]" v-model="goodParams.ce_real_name" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="渠道描述">
							<el-input class="w-[280px]" v-model="goodParams.ce_des" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="渠道城市">
							<el-input class="w-[280px]" v-model="goodParams.ce_city" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="用户头像" prop="avator">
							<div class="w-80">
								<div>
									<material-picker v-model="goodParams.u_avatar" size="60px" :limit="1"/>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="用户名称">
							<el-input class="w-[280px]" v-model="goodParams.u_real_name" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="用户描述">
							<el-input class="w-[280px]" v-model="goodParams.u_des" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="用户城市">
							<el-input class="w-[280px]" v-model="goodParams.u_city" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="合作描述">
							<el-input class="w-[280px]" v-model="goodParams.des" clearable maxlength="20" />
						</el-form-item>
						<el-form-item label="合作时间">
							<div class="inp-date">
								<el-date-picker
									class="inp-date"
									v-model="goodParams.create_time"
									type="date"
									placeholder="选择日期"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
								>
								</el-date-picker>
							</div>
						</el-form-item>
					</el-form>
				</div>
				<div class="w-[450px]">
					<el-carousel v-if="img_list.length != 0" :interval="4000" type="card" height="334px" :autoplay="false" arrow="never" trigger="click" @change="onChange_carousel">
						<el-carousel-item class="img-content" v-for="(item,index) in img_list" :key="index">
							<div v-if="item.type == 1">
								<div :ref="el => setItemRef(el as HTMLElement, item.id)" class="img-new">
									<img class="name-bg" :src="item.url" alt="" crossorigin="anonymous"/>
									<div class="name-pos">
										<div class="name-flex">
											<div class="head-flex">
												<img class="good-head" :src="goodParams.ce_avator" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.ce_real_name }}</div>
												<div class="head-des">{{ goodParams.ce_des }}</div>
												<div class="head-city">{{ goodParams.ce_city }}</div>
											</div>
											<div class="head-flex">
												<img class="good-head" :src="goodParams.u_avatar" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.u_real_name }}</div>
												<div class="head-des">{{ goodParams.u_des }}</div>
												<div class="head-city">{{ goodParams.u_city }}</div>
											</div>
										</div>
										<div class="name-des">{{ goodParams.des }}</div>
										<div class="name-time">合作时间：{{ goodParams.create_time }}</div>
									</div>
								</div>
							</div>
							<div  v-if="item.type == 2">
								<div :ref="el => setItemRef(el as HTMLElement, item.id)" class="img-new type-two">
									<img class="name-bg" :src="item.url" alt="" crossorigin="anonymous"/>
									<div class="name-pos">
										<div class="two-des">{{ goodParams.des }}</div>
										<div class="name-flex">
											<div class="head-flex">
												<img class="good-head" :src="goodParams.ce_avator" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.ce_real_name }}</div>
												<div class="head-des">{{ goodParams.ce_des }}</div>
												<div class="head-city">{{ goodParams.ce_city }}</div>
											</div>
											<div class="head-flex">
												<img class="good-head" :src="goodParams.u_avatar" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.u_real_name }}</div>
												<div class="head-des">{{ goodParams.u_des }}</div>
												<div class="head-city">{{ goodParams.u_city }}</div>
											</div>
										</div>
										<div class="two-time">合作时间：{{ goodParams.create_time }}</div>
									</div>
								</div>
							</div>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<div class="dispute-flex">
				<el-button @click="()=>{showDialog = false}">取消</el-button>
				<el-button type="primary" @click="onSaveImg">保存图片</el-button>
			</div>
		</el-dialog>

		<popup
            ref="popupRef"
            title="创建合作"
            :async="true"
            width="500px"
			confirmButtonText="确认"
            @confirm="handleSubmit"
			@close="handleFormClose"
        >
			<el-form ref="formDataRef" :model="formData" label-width="94px" :rules="formRules">
				<el-form-item label="合作类型">
                    <el-radio-group v-model="formData.mode" @change="onChangeMode">
						<el-radio :label="5">双方分成</el-radio>
						<el-radio :label="2">固定介绍费</el-radio>
						<el-radio :label="1">固定服务费</el-radio>
					</el-radio-group>
                </el-form-item>
				<el-form-item label="渠道名称" prop="userinfo.channel_name">
					<div class="w-80">
						<el-input
								v-model="formData.userinfo.channel_name"
								placeholder="请选择渠道"
								type="text"
								maxlength="30"
								show-word-limit
								clearable
								readonly
							>
							<template #append>
								<el-button @click="addUser(1)">
									选择
									<icon name="el-icon-Plus"/>
								</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="用户名称" prop="userinfo.user_name">
					<div class="w-80">
						<el-input
								v-model="formData.userinfo.user_name"
								placeholder="请选择用户"
								type="text"
								maxlength="30"
								show-word-limit
								clearable
								readonly
							>
							<template #append>
								<el-button @click="addUser(0)">
									选择
									<icon name="el-icon-Plus"/>
								</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item v-if="formData.mode == 1" label="产品名称" prop="userinfo.product_name">
					<div class="w-80">
						<el-input
								v-model="formData.userinfo.product_name"
								placeholder="请选择产品"
								type="text"
								maxlength="30"
								show-word-limit
								clearable
								readonly
							>
							<template #append>
								<el-button @click="addProduct">
									选择
									<icon name="el-icon-Plus"/>
								</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item v-if="formData.mode == 1" label="业务类型" prop="product_cate_id">
			      <el-select class="w-80" v-model="formData.product_cate_id" placeholder="请选择" clearable filterable >
			        <el-option v-for="item in productCateList" :key="item.id" :label="item.name" :value="item.id" />
			      </el-select>
			    </el-form-item>
				<el-form-item label="客户名称" prop="customer_name">
					<div class="w-80">
						<el-input
							v-model="formData.customer_name"
							placeholder="请输入客户"
							type="text"
							maxlength="30"
							clearable
						/>
					</div>
				</el-form-item>
				<el-form-item v-if="formData.mode == 1" label="放款金额" prop="quota">
					<div class="w-80">
						<el-input
							v-model="formData.quota"
							placeholder="请输入放款金额"
							type="number"
							maxlength="30"
							clearable
						>
							<template #append>万</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item v-if="formData.mode == 1" label="渠道服务费" prop="service_fee">
					<div class="w-80">
						<el-input
							v-model="formData.service_fee"
							placeholder="请输入渠道服务费"
							type="number"
							maxlength="30"
							clearable
						>
							<template #append>元</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item v-if="formData.mode == 2" label="介绍费" prop="service_fee">
					<div class="w-80">
						<el-input
							v-model="formData.service_fee"
							placeholder="请输入介绍费"
							type="number"
							maxlength="30"
							clearable
						>
							<template #append>元</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item v-if="formData.mode == 5" label="渠道分成" prop="channel_rate">
					<div class="w-80">
						<el-input
							v-model="formData.channel_rate"
							placeholder="请输入渠道分成"
							type="number"
							maxlength="30"
							@input="onChannelChange"
						>
							<template #append>%</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item v-if="formData.mode == 5" label="用户分成" prop="user_rate">
					<div class="w-80">
						<el-input
							v-model="formData.user_rate"
							placeholder="请输入用户分成"
							type="number"
							maxlength="30"
							@input="onMyChange"
							
						>
							<template #append>%</template>
						</el-input>
					</div>
				</el-form-item>
			</el-form>
		</popup>
		<check_demand ref="checkDemand" :out_type="0" @backAdmin="backAdmin" @backClose="backClose"></check_demand>
		<check_demand ref="channelDemand" :out_type="1" @backAdmin="backAdmin" @backClose="backClose"></check_demand>
		<product_demand ref="productDemand" @backAdmin="backProduct"></product_demand>
	</div>
</template>
<script lang="ts" setup name="cooperationLists">
	import { exportToImage } from '@/utils/exportImage';
	import { cooperationLists, cooperationClose, cooperationDetail, isDispute, createData } from '@/api/cooperate/lists';
	import { usePaging } from '@/hooks/usePaging';
	import { getRoutePath } from '@/router';
	import feedback from '@/utils/feedback';
	import { isEmpty } from "@/utils/util";
	import {useDictOptions} from "@/hooks/useDictOptions";
	import { productCate, productCateLists} from '@/api/product/product'
	import useAppStore from '@/stores/modules/app'
	import { ElLoading } from 'element-plus'
	import type {FormInstance} from 'element-plus';
	import check_demand from './check_demand.vue'
	import product_demand from './product_demand.vue';
	import Popup from '@/components/popup/index.vue'
	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const useApp = useAppStore()
	const optionCity:any = [{value:0,label: '全部'}, {value:1,label: '平台'}].concat(useApp.optionCity);

	const queryParams = reactive({
		status: '',
		ce_real_name: '',
		u_real_name: '',
		sn: '',
		start_time: '',
		end_time: '',
		mode: '',
		product_cate_ids: '',
		area_id: 0
	})
	const showDialog = ref(false)
	const goodParams = reactive({
		ce_real_name: '',
		ce_avator: '',
		ce_des: '接单渠道',
		ce_city: '杭州市',
		u_real_name: '',
		u_avatar: '',
		u_des: '需求用户',
		u_city: '杭州市',
		des: '“恭喜双方在平台达成合作”',
		create_time: ''
	})
	const img_list = [
		{id: 0, type: 1, ref: 'contentRef0', url: 'https://files.onestep6.com/2024/static/image/good_new0.png'},
		{id: 1, type: 2, ref: 'contentRef1', url: 'https://files.onestep6.com/2024/static/image/good_new1.png'},
		{id: 2, type: 1, ref: 'contentRef2', url: 'https://files.onestep6.com/2024/static/image/good_new0.png'},
	]
	const itemRefs = ref<Record<number, HTMLElement | null>>({})
 
	const setItemRef = (el: HTMLElement | null, id: number) => {
		if (el) {
			itemRefs.value[id] = el
		}
	}
	const onChange_carousel = (e:any) => {
		console.log(e)
		index_num.value = e;
	}
	const index_num:any = ref(0)
	
	const onSaveImg = async () => {
		console.log(itemRefs.value)
		console.log(index_num.value)
		startSave()
    };
	const startSave = async () => {
		  try {
			console.log(itemRefs.value[index_num.value])
			// return false;
			const loading = ElLoading.service({
				lock: true,
				text: '图片生成中......',
				// background: 'rgba(0, 0, 0, 0.7)',
			})
		    await exportToImage(itemRefs.value[index_num.value] as any, '合作喜报', {
		      // 可以在这里覆盖默认选项
		      scale: 10, // 更高的清晰度
		    });
			setTimeout(() => {
				loading.close()
			}, 2000)
		  } catch (error) {
		    alert('导出失败，请重试');
		  }
	}
	const showGood = (row:any) => {
		console.log(row)
		goodParams.ce_real_name = row.ce_real_name.slice(0,5);
		goodParams.u_real_name = row.u_real_name.slice(0,5);
		goodParams.ce_avator = row.ce_avator;
		goodParams.u_avatar = row.u_avatar;
		goodParams.ce_city = row.area_name;
		goodParams.u_city = row.area_name;
		console.log(goodParams)
		console.log(img_list)
		goodParams.create_time = row.create_time.split(' ')[0];
		showDialog.value = true;
	}
	const {optionsData} = useDictOptions<{
		product_cate_list: any[],
		}>({
		product_cate_list: {
			api: productCate
		}
	})

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: cooperationLists,
		params: queryParams
	})
	const dialogVisible = ref(false)
	const radio = ref(0)
	const dispute_id = ref()
	const handleChange = (id:any, is_dispute:number) => {
		console.log(id, is_dispute)
		dispute_id.value = id;
		radio.value = is_dispute;
		dialogVisible.value = true;
	}
	const onRight = async () => {
		console.log(dispute_id.value)
		console.log(radio.value)
		await isDispute({
			id: dispute_id.value,
			is_dispute: radio.value
		})
		dialogVisible.value = false;
		getLists()
	}
	const handleClose = async (id : number) => {
		await feedback.confirm('取消合作之后，合作状态将变为“已取消”，确认取消该合作？')
		await cooperationClose({ id })
		getLists()
	}

	onActivated(() => {
		getLists()
	})

	getLists()

	// 创建合作
	const addCooperate = () => {
		popupRef.value?.open();
	}
	const formDataRef = shallowRef<FormInstance>()
	// 确认提交
	const handleSubmit = async () => {
		try {
			console.log(formData)
			await formDataRef.value?.validate();
			console.log(formData)
			let params:any = {
				mode: formData.mode,
				channel_id: formData.channel_id,
				user_id: formData.user_id,
				customer_name: formData.customer_name,
				service_fee: formData.service_fee || 0,
			}
			if( formData.mode == 1 ) {
				params.product_id = formData.product_id;
				params.product_cate_id = formData.product_cate_id;
				params.quota = formData.quota * 10000;
			}
			if ( formData.mode == 2 ) {
				params.service_fee = formData.service_fee;
			}
			if ( formData.mode == 5 ) {
				params.channel_rate = formData.channel_rate;
				params.user_rate = formData.user_rate;
			}
			await createData(params)
			popupRef.value?.close();
			getLists()
		} catch (error) {
			console.log(error)
		}
	}
	const handleFormClose = () => {
		formData.mode = 5;
		formData.user_id = '';
		formData.quota = '';
		formData.customer_name = '';
		formData.user_rate = '';
		formData.channel_rate = '';
		formData.userinfo = {
				channel_name: '',
				user_name: '',
				product_name: ''
		};
		formData.product_id = '';
		formData.product_cate_id = '';
		setTimeout(function () {
			formDataRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
		},30);
	}
	const productCateList:any = ref([])
	const getCate = async () => {
		const {lists}  = await productCateLists({page_no: 1,page_size: 9999,area_id: ''});
		productCateList.value = lists || [];
	}
	getCate();
	// 合作表单信息
	const formData:any = reactive({
		mode: 5, // 1.固定服务费2.(固定介绍费) 5. 比例佣金模式
		channel_id: '', // 渠道id
		user_id: '', // 用户id
		quota: '', // 房贷金额
		service_fee: '', // 服务费，介绍费
		customer_name: '', // 客户名称
		user_rate: '', // 用户比例
		channel_rate: '', // 渠道比例
		userinfo: {
			channel_name: '',
			user_name: '',
			product_name: ''
		},
		product_id: '', // 产品
		product_cate_id: '' // 业务类型
	})
	const validateDecimal = (rule:any, value:any, callback:any) => {
		if (!value) {
			callback(new Error('不能为空'));
		} else if (!/^\d+$/.test(value)) {
			callback(new Error('必须为整数'));
		} else {
			const num = parseFloat(value);
			if (isNaN(num)) {
				callback(new Error('请输入有效数字'));
			} else if (num > 99) {
				callback(new Error('最大值为 99'));
			}  else if (num < 1) { // 如果需要支持负数，可添加此逻辑
				callback(new Error('最小值为 1'));
			} else {
				callback();
			}
		}
	};
	const validateMaxValue = (rule:any, value:any, callback:any) => {
		if (!value) {
			callback(new Error('不能为空'));
		} else if (!/^\d+$/.test(value)) {
			callback(new Error('必须为整数'));
		} else if (value > 10000000) {
			callback(new Error('数值不能超过 10000000'));
		} else {
			callback();
		}
	}
	const validateMaxMore = (rule:any, value:any, callback:any) => {
		if (!value) {
			callback(new Error('不能为空'));
		} else if (!/^\d+(\.\d{1,2})?$/.test(value)) {
			callback(new Error('必须为数字，且最多两位小数'));
		} else if (parseFloat(value) > 10000000) {
			callback(new Error('数值不能超过 10000000'));
		} else {
			callback();
		}
	};
	// 类型变化
	const onChangeMode = (val:any) => {
		console.log(val)
		formData.quota = '';
		formData.service_fee = '';
		formData.channel_rate = '';
		formData.user_rate = '';
		formData.userinfo.product_name = '';
		formData.product_id = '';
		formData.product_cate_id = '';
		setTimeout(function () {
			formDataRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
		},30);
	}
	// 表单校验
	const formRules = {
		'userinfo.channel_name': [{required: true, message: '请选择渠道', trigger: 'blur'}],
		'userinfo.user_name': [{required: true, message: '请选择用户', trigger: 'blur'}],
		'userinfo.product_name': [{required: true, message: '请选择产品', trigger: 'blur'}],
		product_cate_id: [{required: true, message: '请选择业务类型', trigger: 'change'}],
		customer_name: [{required: true, message: '请输入客户姓名', trigger: 'blur'}],
		quota: [{ required: true,validator: validateMaxMore, trigger: 'blur' }],
		service_fee: [{ required: true,validator: validateMaxValue, trigger: 'blur' }],
		channel_rate: [{ required: true,validator: validateDecimal, trigger: 'blur' }],
		user_rate: [{ required: true,validator: validateDecimal, trigger: 'blur' }]
	}
	const onMyChange = (val:any) => {
		console.log(val)
		if (0 < val && val < 100) {
			formData.channel_rate = Math.round((100 - val) * 100) / 100;
		}
	}
    const onChannelChange = (val:any) => {
		console.log(val)
		if (0 < val && val < 100) {
			formData.user_rate = Math.round((100 - val) * 100) / 100;
		}
	}
	// 分页添加用户/渠道
	const checkDemand = ref()
	const channelDemand = ref()
	const addUser = (num : any) => {
		if (num == 0) {
			checkDemand.value.init(num);
		} else {
			channelDemand.value.init(num);
		}
		
	}
	// 选择管理员返回
	const backAdmin = (row: any, type: number)=> {
		console.log('backAdmin')
		console.log(row)
		console.log(type)
		if (type == 0) {
			formData.userinfo.user_name = row.real_name;
			formData.user_id = row.user_id;
		} else {
			formData.userinfo.channel_name = row.real_name;
			formData.channel_id = row.id;
		}
	}
	const productDemand = ref();
	const addProduct = () => {
		productDemand.value.init();
	}
	const backProduct = (row: any,) => {
		console.log(row)
		formData.userinfo.product_name = row.name;
		formData.product_id = row.id;
	}
	const backClose = () => {
		// route.query.id && getLists();
	}
	
</script>
<style lang="scss" scoped>
.dispute-flex{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	span{
		margin-right: 20px;
	}
}
.picker{
    width: 388px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
.img-content{
	width: 188px;
	height: 334px;
}
.img-new{
	position: relative;
	display: block;
	width: 188px;
	height: 334px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding-top: 151px;
	.name-bg{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		display: block;
		width: 188px;
		height: 334px;
	}
	.name-pos{
		position: relative;
		z-index: 10;
	}
	.name-flex{
		display: flex;
		justify-content: space-between;
		padding: 0 36px;
		margin-bottom: 7px;
	}
	.head-flex{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.good-head{
		display: block;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		border: 1px solid #FFD0A7;
		margin-bottom: 2px;
	}
	.head-bot{
		height: 2px;
	}
	.head-name{
		height: 9px;
		font-size: 9px;
		line-height: 9px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 6px;
	}
	.head-des{
		// position: relative;
		// width: fit-content;
		width: 30px;
		height: 9px;
		font-size: 6px;
		line-height: 9px;
		font-weight: bold;
		// padding: 0 3px;
		// border-radius: 4px;
		// background-color: #FFFFFF;
		// background-position: 0 0;
		text-align: center;
		// color: #F20B1B;
		color: #FFFFFF;
		margin-bottom: 3px;
	}
	.head-city{
		font-size: 7px;
		line-height: 7px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
	.name-des{
		width: 156px;
		height: 26px;
		margin: 0 auto 10px;
		font-size: 12px;
		line-height: 13px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
	.name-time{
		font-size: 8px;
		line-height: 11px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
}
.type-two{
	padding-top: 125px;
	.two-des{
		width: 108px;
		height: 28px;
		margin: 0 auto 4px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		color: #DF1313;
	}
	.good-head{
		border: 1px solid #DF1313;
	}
	.head-name{
		color: #333333;
	}
	.head-des{
		color: #F20B1B;
		background: transparent;
		// border: 1px solid #F26767;
	}
	.head-city{
		color: #820D0D;
		margin-bottom: 60px;
	}
	.two-time{
		font-size: 6px;
		line-height: 8px;
		color: #860606;
		font-weight: 400;
		text-align: center;
	}
}
.inp-date{
	::v-deep .el-input__wrapper{
		width: 280px;
	}
}
</style>